<template>
	<div class="col col-lg-2 categories" :style="height">
        <h1><a href="/" class="btn btn-outline-warning" >博客</a>  <a href="/home" class="btn btn-outline-info" >后台</a> <a href="/logout" onclick="event.preventDefault();document.getElementById('logout-form').submit();" class="btn btn-outline-success" >注销</a></h1>        
        <h5><a href="javascript:;" @click="show=!show" class="card-link"><i class="fa fa-plus"></i> 新建文集</a></h5>
        <b-form class="catForm" @submit="onCatSubmit" @reset="onCatReset" v-if="show">        	
            <b-form-input id="exampleInput2"
                          type="text"
                          v-model="catitem.name"
                          required
                          placeholder="请输入文集名...">
            </b-form-input>
          <h4><b-button type="submit" variant="outline-success">提交</b-button>
          <b-button type="reset" variant="outline-secondary">取消</b-button></h4>
        </b-form>
        <ul class="list-group list-group-flush">
          <li class="list-group-item d-flex justify-content-between align-items-center" @click="select(index)" :id="(selectIndex==index && !isTrash)?'selectedCategory':''"  v-for="(item,index) in categories" :key="item.id">
            {{ item.name }}
            <div>
              <i class="fa fa-cog" aria-hidden="true"></i>
              <span>
                <ul class="_3FcHm">
                  <li class="_2po2r cRfUr" title="" @click="editCat(index)"><i class="fa fa-pencil-square-o _22XWG"></i>修改文集</li>
                  <li class="_2po2r cRfUr" v-if="index" title="" @click="delCat(index)"><i class="fa fa-trash-o _22XWG"></i>删除文集</li>
                </ul>
              </span>
            </div>
          </li>
        </ul>
        <ul class="list-group list-group-flush">
          <li :id="isTrash?'selectedCategory':''" @click="trash" class="list-group-item d-flex justify-content-between align-items-center">回收站<div>
              <i class="fa fa-trash" aria-hidden="true"></i>
              <span>
                <ul class="_3FcHm">
                  <li class="_2po2r cRfUr" title="" @click="clearTrash"><i class="fa fa-trash-o _22XWG"></i>清空全部</li>
                </ul>
              </span>
            </div></li>
        </ul>

    </div>
</template>



<script type="text/javascript">
var height=document.documentElement.clientHeight;
height='height:'+height+'px';
export default {
	props: ['categories','curCat'],
	data(){
	  return {
        height:height,
      	show:false,
      	catitem:{},
        isTrash:false,
      }
    },
    computed:{
        selectIndex:{
          get:function(){
            for (var i = this.categories.length - 1; i >= 0; i--) {
              if(this.categories[i].id==this.curCat.id){                  
                  return i;       
              }
            }
            return 0;
          },
          set:function(){
            this.isTrash=false;
          }
        }
    },
    mounted() {
      console.log('mounted blog-cat',this.categories.length);      
    },
    methods:{
      trash:function(){
        this.isTrash=true;
        this.$parent.category={trash:true};
      },
      onCatSubmit:function(e){
     	e.preventDefault();
        var that=this;
        axios.post('/rbac/category/apiStore', {
            catitem:that.catitem
          })
          .then(function (response) { 
            if(that.catitem.id){
              that.catitem={};              
              that.categories[that.selectIndex]=response.data;           
            }else{
              that.categories.push(response.data);
            }
                       
            that.show=false;

          })
          .catch(function (error) {
            console.log(error);
          });
     },
     onCatReset:function(e){
        e.preventDefault();
        this.catitem = {};
        this.show = false;
     },
     clearTrash:function(){
        var that=this;
        axios.post('/rbac/article/apiMovArticle',{status:'delete'})
        .then(function (response) { 
          if(response.data.msg=='success'){
            that.$parent.articlesList={per_page:10,total:0}; 
            that.$parent.showPagination=false;
            that.$parent.alertMsg('清空回收站成功','success');
          }else{
            that.$parent.alertMsg('清空回收站失败','danger');
          }
        })
        .catch(function (error) {
          console.log(error);
        });
     },
     editCat:function(index){
     	this.show=true;
     	this.selectIndex=index;
     	this.catitem=Object.assign({},this.categories[index]);
     	console.log(index);
     },
     delCat:function(index){
       var articlesCount=this.$parent.articlesList.data.length;
       if(articlesCount>0){
        this.$parent.alertMsg('该目录下有'+articlesCount+'篇文章,请删除文章或移动到其他目录','warning');
       }else{
          var that=this;
          axios.post('/rbac/category/apiStore', {
              category_id:that.curCat.id,
              action:'delete'
            })
            .then(function (response) { 
              if(response.data.msg=='success'){
                that.categories.splice(that.selectIndex,1);
                that.$parent.alertMsg('删除分类成功','success');
              }else{
                that.$parent.alertMsg('删除分类失败','danger');
              }    

            })
            .catch(function (error) {
              console.log(error);
            });
       }
     },
     select:function(index) {
          this.selectIndex = index;
          this.$parent.category=this.categories[index];
          this.$parent.input='';
      }

    }
}	

</script>

<style type="text/css">
#selectedCategory{border-left: 3px solid #ec7259;}
.categories #selectedCategory div{display:block;}
.categoried #trashed{}
.categoried #trashed div{display:block;}
.categories{background-color: #404040;}
.categories h1{text-align:center;padding-top:40px;padding-bottom:20px;}
.categories h5{text-indent:8px;text-align:left;padding-bottom:15px;}
.categories h5 a{color:#FFF;}
.categories  .list-group-item{color: #f2f2f2;background-color:transparent;height:40px;line-height:40px;border-left: 3px solid #404040;}
.categories  .list-group-item div{position:relative;width:30px;height:30px;line-height:30px;text-align:center;display:none;}
.categories  .list-group-item div span {
    display: block;
    margin-right: 20px;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.categories  .list-group-item div:hover span ul{
  display:block;
}
.categories  .list-group-item div span ul{
  position:absolute;
  display:none;
  left: -62px;
  top: 30px;
  z-index:1000;
  background-color:#FFF;
  border-radius:5px;
  color:#333;
  list-style:none;
  padding-left: 0px;
  padding-right:0px;
  padding-top: 3px;
  padding-bottom: 3px;
}
.categories  .list-group-item div span ul._3FcHm::before {
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-bottom: 9px solid #fff;
    top: -9px;
    position: absolute;
    right: 12px;
    content: "";
    display: inline-block;
}
.categories  .list-group-item div span ul._3FcHm li{line-height:40px;height:40px;border-bottom:1px solid silver;padding:0 10px;cursor:pointer;}
.categories  .list-group-item div span ul._3FcHm li:last-child{border-bottom:none;}
.categories  .list-group-item div span ul._3FcHm li:hover{background-color:#333;color:#FFF;}
.catForm{padding:20px;}
.catForm input{border-radius:0px;background-color:transparent;color: #FFF;}
.catForm h4{text-align:center;}
.catForm h4 button{margin-top:8px;}
</style>